<template>
  <div>
  <b-nav-item-dropdown right no-caret>
    <template slot="button-content">
      <img :src="_headpic" class="img-avatar" :alt="username">
    </template>
    <b-dropdown-header tag="div" class="text-center"><strong>设置</strong></b-dropdown-header>
    <b-dropdown-item><i class="fa fa-user"></i>欢迎{{username}}</b-dropdown-item>
    <b-dropdown-item @click="updatePwd"><i class="icon-lock-open"></i>修改密码</b-dropdown-item>
    <b-dropdown-item @click="logout"><i class="fa fa-lock"></i>退出</b-dropdown-item>
  </b-nav-item-dropdown>
  <Modal v-model="modalSetting.show" width="500" :styles="{top: '100px'}" @on-visible-change="doCancel">
    <div slot="header" style="color:#2d8cf0;">
      <Icon type="information-circled"></Icon>
      <b>修改密码</b>
    </div>
    <Form label-position="left" :label-width="80" :model="formItems" ref="validate" :rules="rules">
      <div class="col-sm-10">
        <formItem label="旧密码:" prop="oldpwd">
          <i-input type="text"  v-model="formItems.oldpwd"></i-input>
        </formItem>
        <formItem label="新密码:" prop="newpwd">
          <i-input type="text"  v-model="formItems.newpwd"></i-input>
        </formItem>
        <formItem label="确认密码:" prop="confirmpwd">
          <i-input type="text"  v-model="formItems.confirmpwd"></i-input>
        </formItem>
      </div>
    </Form>
    <div slot="footer">
      <Button type="text" @click="cancel" style="margin-right: 8px">取消</Button>
      <Button type="primary" @click="submit('validate')" :loading="modalSetting.loading">确定</Button>
    </div>
  </Modal>
  </div>
</template>
<script>
export default {
  name: 'header-dropdown-accnt',
  data () {
    const validatePassCheck = (rule, value, callback) => {
      if (value === '') {
        console.log(1)
        callback(new Error('请再次输入新密码'))
      } else if (value !== this.formItems.newpwd) {
        callback(new Error('俩次输入密码不正确'))
      } else {
        callback()
      }
    }
    return {
      headpic: '',
      username: '',
      userid: '',
      modalSetting: {
        show: false,
        loading: false
      },
      formItems: {
        oldpwd: '',
        newpwd: '',
        confirmpwd: ''
      },
      rules: {
        oldpwd: [
          {required: true, message: '请输入旧密码', trigger: 'blur'}
        ],
        newpwd: [
          {required: true, message: '请输入新密码', trigger: 'blur'}
        ],
        confirmpwd: [
          {required: true, message: '请再次输入新密码', trigger: 'blur'},
          {validator: validatePassCheck, trigger: 'blur'}
        ]
      }
    }
  },
  computed: {
    _headpic () {
      return this.headpic === '' ? '/static/img/avatars/6.jpg' : this.headpic
    }
  },
  methods: {
    getUserinfo () {
      this.$get('/api/admin/admin/' + this.userid).then((res) => {
        if (res) {
          this.headpic = res.data.adm_headpic
          this.username = res.data.adm_user
        }
      })
    },
    logout () {
      this.$get('/api/admin/index/logout').then((res) => {
        if (res) {
          this.$Message.success({
            content: '退出成功',
            onClose: () => {
              localStorage.clear()
              this.$router.push('/admin/login')
            }
          })
        }
      })
    },
    updatePwd () {
      this.modalSetting.show = true
    },
    cancel () {
      this.$refs['validate'].resetFields()
      this.modalSetting.show = false
      this.modalSetting.loading = false
    },
    doCancel () {
      this.$refs['validate'].resetFields()
    },
    submit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$post('/api//user/index/updatePwd', this.formItems).then((res) => {
            if (res) {
              this.$Message.success({
                content: res.mess,
                closable: () => {
                  this.router.go(0)
                }
              })
            }
          })
        }
      })
    }
  },
  created () {
    this.userid = JSON.parse(localStorage.getItem('user_info')).adm_id
    this.getUserinfo()
  }
}
</script>
